import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';

import OperatorConstant from "../../utils/OperatorConstant";

const R = require('ramda');
import moment from 'moment'
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';




export default Form.create({wrappedComponentRef: true})(class Deposit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            type: "",
            loading: false,
        }
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    }

    handleCancel = () => {
        this.handleResetFields();
        this.setState({open: false});
    }

    handleOpen = (type) => {
        this.state.type = type;
        this.setState({open: true})
    }

    handleConfirm = () => {
        if(this.state.type == OperatorConstant.view){
            return;
        }
        let values = this.props.form.getFieldsValue();

        this.props.form.validateFields((error, values) =>{
            if(error) return;
            if(this.state.type == OperatorConstant.deposit_release){
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;

            let forex_relate_id=R.isNil(this.props.dataSource)?null:this.props.dataSource.forex_relate_id;
            let releaseAmount =values.releaseAmount;

            let  unpayamount = dataSource.unpayamount;

            if(forex_relate_id == null){
                message.error("外汇未关联，不能释放保证金！");               
                return;
            }

            if(releaseAmount<= 0){
                message.error("释放金额需大于0");
                return;
            }


            if(unpayamount < releaseAmount){
                message.error("释放金额需小于待释放金额");
                return;
            }

            this.setState({ loading: true});
            
            this.props.dispatch({
                type: 'deposit/release', payload: {
                    depositid: dataSource.id,
                    depositno: dataSource.depositno,
                    amount: releaseAmount,
                    memo: values.releaseMemo,
                    onSuccess:()=>{
                        this.props.handleSearch();
                        this.props.dispatch({type: 'deposit/getDepositById', payload: {id: dataSource.id}});
                        let newPage = this.props.deposit.releasePage;
                        this.setState({ loading :false});
                        this.props.dispatch({
                            type: 'deposit/getDepositReleaseList',
                            payload: {
                                id: R.isNil(dataSource.id) ? "" : dataSource.id,
                                page: newPage,
                                }
                            });
                        },onFail:()=>{
                            this.setState({ loading:false});
                        }
                    }
                });
            }
        })
    }


    columns = [
        {title: '序号', dataIndex: 'id', key: 'id' },
        {title: '释放金额', dataIndex: 'amount', key: 'amount'},
        {title: '释放时间', dataIndex: 'createtime', key: 'createtime'},
        {title: '操作人', dataIndex: 'creatorName', key: 'creatorName'},
        {title: '状态', key: 'status',
            render(record){
                if(record.status == 1){
                    return "已释放";
                }else if(record.status == 0){
                    return "未释放";
                }else{
                    return "未知";
                }
            }
        },
        {title: '备注', dataIndex: 'memo', key: 'memo'},
    ];

    render() {
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
        let footer = [];

        footer.push(<Button key="cancel" size="large"  onClick={this.handleCancel.bind(this)}>取消</Button>);

        let disable = true;

        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.deposit.releasePage.size,
            total: this.props.deposit.releasePage.totalRow,
            showSizeChanger: true,
            current: this.props.deposit.releasePage.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.deposit.releasePage;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'deposit/getDepositReleaseList',
                    payload: {
                        id: R.isNil(dataSource.id) ? "" : dataSource.id,
                        page: newPage,
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.deposit.releasePage;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'deposit/getDepositReleaseList',
                    payload: {
                        id: R.isNil(dataSource.id) ? "" : dataSource.id,
                        page: newPage,
                    }
                });
            }
        }

        return (
            <Modal maskClosable={false} visible={this.state.open} title={"保证金"} width={1000} wrapClassName="vertical-center-modal"
                   onCancel={this.handleCancel.bind(this)} footer ={footer}>


                    <Row>
                        <Col span={12}>

                            <FormItem {...formItemLayout} label="保证金单号" hasFeedback>
                                {getFieldDecorator('ids', {
                                    initialValue: dataSource.id
                                })(
                                    <Input style={{width: '100%'}} disabled={disable}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="费用申报时间" hasFeedback>
                                {getFieldDecorator('createtime', {
                                    rules: [{
                                        required: true, message: '请输入费用申报时间',
                                    }],
                                    initialValue: (dataSource.createtime == '' || dataSource.createtime == null) ? '' : moment(dataSource.createtime, dateFormat)

                                })(
                                    <DatePicker
                                        showTime={{format: 'YYYY-MM-DD'}}
                                        format="YYYY-MM-DD"
                                        placeholder="请选择时间"
                                        style={{width: '100%'}} disabled={disable}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="客户编码" hasFeedback>
                                {getFieldDecorator('customerno', {
                                    initialValue: dataSource.customerno
                                })(
                                    <Input disabled={disable}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="客户名称" hasFeedback>
                                {getFieldDecorator('companyname',{
                                    initialValue: dataSource.companyname
                                })(
                                    <Input disabled={disable}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout}  label="保证金金额"  hasFeedback>
                                {getFieldDecorator('amount', {

                                    initialValue: dataSource.amount
                                })(
                                    <InputNumber style={{width: '100%'}}  disabled={disable}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="待释放金额" hasFeedback>
                                {getFieldDecorator('unpayamount', {
                                    initialValue: dataSource.unpayamount
                                })(
                                    <InputNumber style={{width: '100%'}}  disabled={disable}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout}  label="外汇金额"  hasFeedback>
                                {getFieldDecorator('fxamount', {
                                    initialValue: dataSource.fxamount
                                })(
                                    <InputNumber style={{width: '100%'}}  disabled={disable}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout}  label="预收金额"  hasFeedback >
                                {getFieldDecorator('recamount',{
                                    initialValue: dataSource.recamount
                                })(
                                    <InputNumber style={{width: '100%'}}  disabled={disable}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    {OperatorConstant.deposit_release == this.state.type ?
                        <Tabs>
                            <TabPane tab="释放金额" key="1">
                                <Form>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="释放金额" hasFeedback>
                                                {getFieldDecorator('releaseAmount', {

                                                    initialValue: ""
                                                })(
                                                    <InputNumber style={{width: '100%'}} min={0} maxLength="11"/>
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <Button type="primary" className="search" loading={this.state.loading}  onClick={this.handleConfirm.bind(this)}>释放保证金</Button>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="备注" hasFeedback>{
                                                getFieldDecorator('releaseMemo', {
                                                    initialValue: ''
                                                })(
                                                    <Input type={'textarea'} maxLength="100"/>
                                                )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </Form>
                            </TabPane>
                        </Tabs>
                        : ""}
                
                <Tabs>
                    <TabPane tab="释放记录" key="1">
                         <Table dataSource={this.props.deposit.releaseList} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} scroll = {{x:true}}/>
                    </TabPane>
                </Tabs>

            </Modal>
        );
    }
})


